<template>
  <div>
    <a-tabs default-active-key="CustomEditor" @change="tabClick">
      <a-tab-pane key="CustomEditor" tab="自定义Markdown">
        <custom-editor
          ref="CustomEditor"
          savebtn
          imgbtn
          zoom
          @save="saveClick"
        />
      </a-tab-pane>
      <a-tab-pane key="Simplemde" tab="Simplemde">
        <simplemde ref="Simplemde" @save="saveClick" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import CustomEditor from "@/components/global/marked/custom/editor";
import Simplemde from "@/components/global/marked/simplemde";

@Component({
  name: "Marked",
  components: {
    Simplemde,
    CustomEditor,
  },
})
export default class Marked extends Vue {
  tabIndx = "CustomEditor";

  /**
   * 设置数据
   */
  setData(value: string) {
    (this.$refs[this.tabIndx] as any).setData(value || "");
  }

  tabClick(key: string) {
    const beforeKey = this.tabIndx
    this.tabIndx = key
    const markedownText = (this.$refs[beforeKey] as any).getData();
    this.$nextTick(() => {
      (this.$refs[key] as any).setData(markedownText);
    })
  }

  /**
   * 获取数据
   * @returns {*}
   */
  getData() {
    return (this.$refs[this.tabIndx] as any).getData();
  }

  /**
   * 保存按钮点击
   */
  saveClick() {
    this.$emit("save");
  }
}
</script>

<style scoped></style>
